import { Modal, Form, Input, DatePicker, message } from 'antd'
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
import EnterpriseUserSelect from '@/components/EnterpriseUserSelect';
import { useEffect, useState } from 'react';
import { formetDate } from '@/utils/dateUtils'
import { connect } from 'umi';
import { save } from '@/services/project/qa'
import ProjectProdSelect from '@/pages/projects/components/ProjectProduct/ProjectProdSelect'
import ProjectDevSelect from '@/pages/projects/components/ProjectDev/ProjectDevSelect'
import ObjectsUtils from '@/utils/ObjectsUtils'

const QaAddModalInner = (props) => {

    const {
        projectId,
        visible,
        onCancel,
        onSaveSuccess,
    } = props;

    const [form] = Form.useForm();
    const [selectProdId, setSelectProdId] = useState();
    const [selectDevId, setSelectDevId] = useState()
    const [modalVisible, setModalVisible] = useState(false);
    const [bugSaveLoading, setBugSaveLoading] = useState()

    useEffect(() => {
        if (visible) {
            setModalVisible(visible)
        }
    }, [visible])


    const saveQA = async () => {
        const values = await form.validateFields()
        setBugSaveLoading(true)
        console.log(values)
        const data = {
            ...values
        }
        if (values.planDate) {
            data.planStartDate = formetDate(values.planDate[0]);
            data.planEndDate = formetDate(values.planDate[1]);
            data.planDate = undefined
        }
        if (values.actualDate) {
            data.actualStartDate = formetDate(values.actualDate[0]);
            data.actualEndDate = formetDate(values.actualDate[1]);
            data.actualDate = undefined
        }
        save(projectId, data).then(({ success }) => {
            if (success) {
                message.success("保存成功！")
                setBugSaveLoading(false)
                onSaveSuccess()
            }
        })
    }

    return (<Modal
        visible={modalVisible}
        closable
        title={"新增测试项"}
        onCancel={onCancel}
        onOk={() => {
            saveQA();
        }}
        confirmLoading={bugSaveLoading}
        destroyOnClose
        okText={"确认"}
        cancelText={"取消"}
    >
        <Form
            form={form}
            labelAlign="right"
            labelCol={{ span: 4 }}
            onValuesChange={(values) => {
                console.log(values)
                if (ObjectsUtils.containKey(values,"projectProdItemId") && selectProdId !== values.projectProdItemId) {
                    setSelectProdId(values.projectProdItemId);
                    form.resetFields(["projectDevItemId"])
                }
            }}
        >
            <FormItem
                label={"名称"}
                name="name"
                rules={[
                    {
                        required: true,
                        message: "请输入名称",
                    },
                ]}
            >
                <Input placeholder={"请输入名称"} maxLength={20} ></Input>
            </FormItem>
            <FormItem
                label={"所属迭代"}
                name="projectProdItemId"
            >
                <ProjectProdSelect
                    allowClear={true}
                    projectId={projectId} />
            </FormItem>
            {selectProdId && <FormItem
                label={"开发项"}
                name="projectDevItemId"
            >
                <ProjectDevSelect
                    allowClear={true}
                    params={{ projectProdItemId: selectProdId }}
                    projectId={projectId} />
            </FormItem>}
            <FormItem
                label={"负责人"}
                name="userId"
                rules={[
                    {
                        required: true,
                        message: "请选择负责人",
                    },
                ]}
            >
                <EnterpriseUserSelect projectId={projectId} ></EnterpriseUserSelect>
            </FormItem>
            <Form.Item name="actualDate" label={"实际周期"}>
                <RangePicker format="YYYY-MM-DD" />
            </Form.Item>
            <Form.Item name="planDate" label={"预计周期"}>
                <RangePicker format="YYYY-MM-DD" />
            </Form.Item>
            <FormItem label={"描述"}
                name="description"
                rules={[
                    {
                        required: true,
                        message: "请输入描述",
                    },
                ]}
            >
                <Input.TextArea placeholder="请输入描述" maxLength={200} showCount>
                </Input.TextArea>
            </FormItem>
        </Form>
    </Modal>)
}

const QaAddModal = (props) => {
    const {
        visible
    } = props

    return (visible && <QaAddModalInner {...props}></QaAddModalInner>)
}

export default QaAddModal;

